import React,{Component} from 'react';
import Header from './components/Header'
import List from './components/List';
import Footer from './components/Footer';
import './App.css'

export default class App extends Component{
  state={todoList:[
    {id:'001',td:'吃饭',done:false},
    {id:'002',td:'睡觉',done:true},
    {id:'003',td:'打游戏',done:false},
  ]}
  checkAllAction=(flag)=>{
    console.log(flag,'父组件接收的参数');
    const {todoList}=this.state
    const newTodoList=todoList.map(val=>{
      return {...val,done:flag}
    })
    this.setState({todoList:newTodoList})
    console.log(this.state.todoList,'=====');
  }
  deleteChecked=()=>{
    const {todoList}=this.state
    const newTodoList=todoList.filter(val=>val.done!==true)
    this.setState({todoList:newTodoList})
  }
  addTodo=(obj)=>{
    console.log(obj,'父组件接收的参数');
    const {todoList}=this.state
    const newTodoList=[obj,...todoList]
    this.setState({todoList:newTodoList})
  }
  deleteOne=(id)=>{
    const {todoList}=this.state
    const newTodoList=todoList.filter(val=>val.id!==id)
    this.setState({todoList:newTodoList})
  }
  changeActionFather=(uuid,res)=>{
    console.log(uuid,res,'==========');
    const {todoList}=this.state
    const newTodoList=todoList.map(val=>{
      if(val.id===uuid) return {...val,done:res}
      else return val
    })
    this.setState({todoList:newTodoList})
  }
  render(){
    const {todoList} =this.state
    return (
      <div className='todo-container'>
        <Header addTodo={this.addTodo}></Header>
        <List todo={todoList} deleteTwo={this.deleteOne} changeActionFather={this.changeActionFather}></List>
        <Footer todo={todoList} checkAllAction={this.checkAllAction} deleteChecked={this.deleteChecked}></Footer>
      </div>
    )
  }
}

